<extend name="Public/base" />
<block name="title1">主页</block>
<block name="css"> 
<link rel="stylesheet" href="__PUBLIC__/Css/Home/index/common.css" />
<link rel="stylesheet" href="__PUBLIC__/Css/Home/index/tmall.css" />
<link rel="stylesheet" href="__PUBLIC__/Css/Home/index/site-base.css" />
<link rel="stylesheet" href="__PUBLIC__/Css/Home/index/pkg-home.css" />
</block>
<block name="main1">

    <div id="container">
            <div class="yHeader">
                <!-- 导航   start  -->
                <div class="yNavIndex">
                	<ul class="yMenuIndex">
                        <li><a href="<{:U('index')}>" class="yMenua">首页</a></li>
						<volist name='cates' id='vo'>
						 <li><a href="javascript:void(0)" target="_blank" ><{$vo.cate_name}></a></li>	
						</volist>
                    </ul>
                    <div class="menus">
                        <h2 class="menusTitle">
                                                            所有商品分类
                        </h2>
                        <ul class="cats">
                          <volist name='cates' id='vo'>
                           <li data-id='<{$vo.id}>'> 
							   <i class="listi1"></i>
							   <a href="javascript:(0)" target="_blank"><{$vo.cate_name}></a>
						   </li>
                            </volist> 
                        </ul>
                        <!-- 下拉详细列表具体分类 -->
                        <div class="menus_sub_area">
                        	<volist name='cates' id='vo'>
                        		<div class="menus_sub">
                                     <div class="yMenuLCinList" id='first_<{$vo.id}>'>
                                     </div>
							    </div>
                        	</volist>
                        </div>
                    </div>
                    
                </div>
               
            </div> <!-- 导航   end  -->
            <!--  顶部    end-->
            <!-- banner   start -->
<div class="yBanner">
   
	<div class="row clearfix">
		<div class="col-md-12 column">
			<div class="carousel slide" id="carousel-182248">
				<ol class="carousel-indicators">
					<li class="active" data-slide-to="0" data-target="#carousel-182248">
					</li>
					<li data-slide-to="1" data-target="#carousel-182248">
					</li>
					<li data-slide-to="2" data-target="#carousel-182248">
					</li>
				</ol>
				<div class="carousel-inner">
					<div class="item active" align='center'>
						<img alt="" src="__ROOT__/Public/Photo/index/1.jpg" />
						<div class="carousel-caption">
							<!--文本区域-->
						</div>
					</div>
					<div class="item" align='center'>
						<img alt="" src="__ROOT__/Public/Photo/index/2.jpg" />
						<div class="carousel-caption">
							<!--文本区域-->
						</div>
					</div>
					<div class="item" align='center'>
						<img alt="" src="__ROOT__/Public/Photo/index/3.jpg" />
						<div class="carousel-caption">
							<!--文本区域-->
						</div>
					</div>
				</div>
				 <a class="left carousel-control" href="#carousel-182248" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-182248" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
			</div>
	
		</div>
</div>
</div>
 <!--中间-->
<div class="mzcontainer" style='background-color:#F5F5F5;'>
<div class='home-rmd-cotent' >
     <div class='phone'>小米明星单品</div>
	<volist name='phone' id='vo'>
<a href="<{:U('detail')}>?id=<{$vo.goods_id}>&type=<{$vo.type_id}>">
	<div class="rmd-box rmd-box-product" >
		<div class="rmd-product-detail" >
			<img class="home-img-lazy"width="200" height="200" src="__ROOT__/Uploads/prod/<{$vo.goods_pic}>" alt="" />
		</div>
		<div class="rmd-product-desc">
			<h2 class="rmd-product-title"><{$vo.goods_name}></h2>
			<h6 class="rmd-product-subtitle red">￥<{$vo.goods_price}>.00</h6>
			<h6 class="rmd-product-subtitle red"><{$vo.goods_desc}></h6>
		</div>
	</div>
	</a>
	</volist>
 </div>	
</div>

<div class="mzcontainer" style='background-color:#F5F5F5;'>
<div class='home-rmd-cotent' >
     <div class='computer'>小米笔记本</div>
	<volist name='computer' id='vo'>
<a href="<{:U('detail')}>?id=<{$vo.goods_id}>&type=<{$vo.type_id}>">
	<div class="rmd-box rmd-box-product" >
		<div class="rmd-product-detail" >
			<img class="home-img-lazy"width="200" height="200" src="__ROOT__/Uploads/prod/<{$vo.goods_pic}>" alt="" />
		</div>
		<div class="rmd-product-desc">
			<h2 class="rmd-product-title"><{$vo.goods_name}></h2>
			<h6 class="rmd-product-subtitle red">RMB:<{$vo.goods_price}>.00</h6>
			<h6 class="rmd-product-subtitle red"><{$vo.goods_desc}></h6>
		</div>
	</div>
	</a>
	</volist>
 </div>	
</div>

	
	
<script type="text/javascript">
            $(function() {
				//自动触发
				$('[role="button"]').click();
                $(".cats li").hover(function() {
					 var id = $(this).attr('data-id');
					$.post("<{:U('docate')}>",{id:id},function(data){
						 var html='';
						$(data).map(function(k,v){		
							html+="<h3><a target='_blank' href='<{:U(goods)}>?id="+v.id+"&type="+v.type_id+" '>"+v.cate_name+"</a></h3>";
							$("#first_"+id).html(html);
						})
						$("#first").html("<h3></h3>");
						
					},'json');
                    $(".menus_sub_area").fadeIn(); //子菜单显示
                    var index = $(this).index(".cats li");//当前索引
                    
                    if (!($(this).hasClass("menulihover") || $(this).hasClass("menuliselected"))) { //切换banner
                        $($(".yBannerList")[index]).css("display", "block").siblings().css("display", "none");
                        $($(".yBannerList")[index]).removeClass("ybannerExposure");
                        setTimeout(function() {
                            $($(".yBannerList")[index]).addClass("ybannerExposure");
                        }, 1000)
                    }
                    $(this).addClass("menulihover").siblings().removeClass("menulihover");
                    $(this).addClass("menuliselected").siblings().removeClass("menuliselected");
                    $($(".menus_sub")[index]).fadeIn().siblings().fadeOut();
                })
                $(".menus").mouseleave(function() { //当鼠标离开左侧菜单
                    $(".menus_sub_area").fadeOut();//子菜单隐藏
                    $(".menus_sub").fadeOut();
                    $(".cats li").removeClass("menulihover");
                })
            })
        </script>	
</block>
